{% stylesheet %}
.page-header {
  position: relative;
  z-index: 999;
  background-color: var(--page_background_color);
}
.page-header.on{
  z-index: 510000;
}

.page-header .top-bar {
  background-color: var(--bg-color);
  color: var(--text-color);
  text-align: center;
  padding: 10px;
}

.page-header .top-bar a {
  color: inherit;
}

.page-header .header_box {
  border-bottom: 3px solid #0e0c0d;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (min-width: 768px) {
  .page-header .header_box {
    min-height: 100px;
  }
}

@media screen and (max-width: 767px) {
  .page-header .header_box {
    min-height: 60px;
  }
}

.page-header .header_box svg path {
  fill: var(--font-color);
}

.page-header .header_box .nav {
  flex: 1;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .page-header .header_box .nav .mobile_menu {
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  .page-header .header_box .nav ul.tree-wrap {
    display: none !important;
  }
}

.page-header .header_box .nav .mobile_menu span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 44px;
    width: 44px;
    position: relative;
    cursor: pointer;
  }
  .page-header .header_box .nav .mobile_menu span .icon-hamburger {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
  }
  .page-header .header_box .nav .mobile_menu span .icon-close {
    visibility: hidden;
    width: 12px !important;
    height: 12px !important;
    opacity: 0;
  }
  .page-header .header_box .nav .mobile_menu span.open .icon-hamburger {
    visibility: hiden;
    opacity: 0;
  }
  .page-header .header_box .nav .mobile_menu span.open .icon-close {
    visibility: visible;
    opacity: 1;
  }
  .page-header .header_box .nav .mobile_menu span .icon {
    width: 17px;
    height: 17px;
    position: absolute;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

@media screen and (min-width: 768px) {
  .page-header .header_box .nav .mobile_menu {
    display: none;
  }
  .page-header .header_box .nav ul.tree-wrap {
    display: block;
  }
  .page-header .header_box .nav ul.tree-wrap .nav-li .nav-li-a {
    cursor: pointer;
  }
  .page-header .header_box .nav ul.tree-wrap .nav-li .nav-li-a:hover .first_li a {
    transform: translateY(-100%);
  }
  .page-header .header_box .nav ul.tree-wrap .nav-li .nav-li-a:hover .first_li a:nth-last-child(1) {
    transform: translateY(0);
  }
  .page-header .header_box .nav ul.tree-wrap .nav-li .nav-li-a .first_li {
    position: relative;
    overflow: hidden;
  }
  .page-header .header_box .nav ul.tree-wrap .nav-li .nav-li-a a {
    display: block;
    transition: all 0.2s;
  }
  .page-header .header_box .nav ul.tree-wrap .nav-li .nav-li-a a:nth-last-child(1) {
    position: absolute;
    content: attr(title);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    transition: all 0.2s;
  }
}

.page-header .header_box .nav ul.tree-wrap {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  height: 100%;
}

.page-header .header_box .nav ul.tree-wrap li {
  list-style-type: none;
}

.page-header .header_box .nav ul.tree-wrap li .nav-li-a {
  font-weight: 400;
  letter-spacing: var(--nav_letter_spacing);
  font-size: 1rem;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  height: 100%;
}

.page-header .header_box .nav ul.tree-wrap li .nav-li-a a {
  position: relative;
  color: var(--font-color);
}

.page-header .header_box .nav ul.tree-wrap li .nav-li-a svg {
  margin-left: 5px;
}

.page-header .header_box .nav ul.tree-wrap .nav-li {
  position: relative;
  padding: 10px 0;
}

.page-header .header_box .nav ul.tree-wrap .nav-li:hover .nav-child {
  display: block;
}

.page-header .header_box .nav ul.tree-wrap .nav-li .nav-child {
  display: none;
  padding: 8px 24px;
  background-color: #1c1a18;
  min-width: 220px;
  position: absolute;
  z-index: 999;
  max-height: 500px;
  overflow-y: scroll;
}
.page-header .header_box .nav ul.tree-wrap .nav-li .nav-child::-webkit-scrollbar{
  display: none;
}

.page-header .header_box .nav ul.tree-wrap .nav-li .nav-child li dl dt {
  border-bottom: 1px solid rgba(255, 255, 255, 0.472);
  font-size: 1rem;
  text-transform: uppercase;
}

.page-header .header_box .nav ul.tree-wrap .nav-li .nav-child li:nth-last-child(1) dl dt {
  border-bottom: 0;
}

.page-header .header_box .nav ul.tree-wrap .nav-li .nav-child a {
  color: #fff;
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0.7;
  transition: opacity 0.7s ease;
  padding: 12px 0;
}

.page-header .header_box .nav ul.tree-wrap .nav-li .nav-child a:hover {
  opacity: 1;
}

.page-header .header_box .logo {
  margin: 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-header .header_box .logo a {
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--font-color);
}

.page-header .header_box .action-icon {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .page-header .header_box .action-icon .currency_box {
    display: none;
  }
  .page-header .header_box .action-icon .login {
    display: none;
  }
}

.page-header .header_box .action-icon .currency_box {
  position: relative;
  margin-right: 12px;
  height: 100%;
}

.page-header .header_box .action-icon .currency_box .currency_txt {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--font-color);
  letter-spacing: var(--nav_letter_spacing);
  cursor: pointer;
}

.page-header .header_box .action-icon .currency_box .currency_txt svg {
  width: 14px;
  fill: #333;
  margin-left: 5px;
  -webkit-transition: transform 0.2s ease-in-out;
  -moz-transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
}

.page-header .header_box .action-icon .currency_box .drop_currency {
  position: absolute;
  left: 0;
  padding: 10px;
  width: 180px;
  box-sizing: border-box;
  background-color: #1c1a18;
  border: 1px solid #1c1a18;
  -webkit-transition: transform 0.2s ease-in-out;
  -moz-transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  z-index: 999;
}

.page-header .header_box .action-icon .currency_box .drop_currency li {
  list-style-type: none;
}

.page-header .header_box .action-icon .currency_box .drop_currency li a {
  display: flex;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #fff;
  letter-spacing: var(--nav_letter_spacing);
  font-size: 14px;
  margin: 0;
}

.page-header .header_box .action-icon .currency_box .drop_currency li a:hover {
  background-color: #fff;
  color: #1c1a18;
}

.page-header .header_box .action-icon .currency_box.drop_currency_on .drop_currency {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.page-header .header_box .action-icon .currency_box.drop_currency_on .currency_txt svg {
  transform: rotate(-180deg);
}

.page-header .header_box .action-icon .action-icon-wrap {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  grid-column-gap: 12px;
}

.page-header .header_box .action-icon .action-icon-wrap a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-header .header_box .action-icon .action-icon-wrap .cart_icon {
  position: relative;
}

.page-header .header_box .action-icon .action-icon-wrap .cart_icon span {
  min-width: 20px;
  height: 20px;
  background: #f00b0b;
  display: none;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  position: absolute;
  top: 50%;
  right: -10px;
  margin-top: -20px;
}

@media screen and (max-width: 767px) {
  .page-header .header_box .action-icon .login {
    display: none !important;
  }
}

.page-header .pop_search {
  position: absolute;
  height: 180px;
  display: none;
  z-index: 900;
  left: 50%;
  transform: translateX(-50%);
}

.page-header .pop_search .search_wrap {
  background-color: #1c1a18;
  height: 100%;
  width: 100%;
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.page-header .pop_search.pop_search_on {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-header .pop_search form {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 55px;
  padding: 8px 0;
  position: relative;
}

.page-header .pop_search form::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.472);
  transform: scaleY(0.5);
  bottom: 0;
}

.page-header .pop_search form button {
  background-color: transparent;
}

.page-header .pop_search form button svg path {
  fill: rgba(255, 255, 255, 0.472);
}

.page-header .pop_search form input {
  flex: 1;
  margin: 0 12px;
  height: 100%;
  background-color: transparent;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .page-header .pop_search form input {
    margin: 0 12px 0 0;
  }
}

.page-header .pop_search form #search_btn_close svg {
  transition: all 0.3s;
}

.page-header .pop_search form #search_btn_close svg path {
  fill: #fff;
}

.page-header .pop_search form #search_btn_close:hover svg {
  transform: rotate(180deg);
}

.page-header .mobile_card {
  background-color: #fff;
  height: 400px;
  width: 100vw;
  position: absolute;
  z-index: 800;
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.2s;
}

.page-header .mobile_card .mobile_card_content {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: space-between;
  overflow-y: auto;
  height: 100%;
}

.page-header .mobile_card .mobile_card_content .menu-drawer__navigation {
  padding: 0 15px;
}

.page-header .mobile_card .mobile_card_content .menu-drawer__navigation li .mobile_nav-item {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom: 1px solid #cbb8c1;
}

.page-header .mobile_card .mobile_card_content .menu-drawer__navigation li .mobile_nav-item.open svg {
  transform: rotate(180deg);
}

.page-header .mobile_card .mobile_card_content .menu-drawer__navigation li .mobile_nav-item svg {
  transition: all 0.2s;
}

.page-header .mobile_card .mobile_card_content .menu-drawer__navigation li .mobile_nav-item svg path {
  fill: var(--font-color);
}

.page-header .mobile_card .mobile_card_content .menu-drawer__navigation li .mobile_nav-item a {
  font-weight: 600;
  color: var(--font-color);
}

.page-header .mobile_card .mobile_card_content .menu-drawer__navigation li .child_mobile_nav {
  display: none;
}

.page-header .mobile_card .mobile_card_content .menu-drawer__navigation li .child_mobile_nav .mobile_nav-item {
  border-bottom: 1px solid #cbb8c15e;
}

.page-header .mobile_card .mobile_card_content .menu-drawer__navigation li .child_mobile_nav .mobile_nav-item a {
  font-weight: 100;
  font-size: 0.9em;
  opacity: 0.8;
  color: var(--font-color);
}

.page-header .mobile_card .mobile_card_content .menu-drawer__navigation li .child_mobile_nav .child_mobile_nav li {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom: 1px solid #cbb8c15e;
}

.page-header .mobile_card .mobile_card_content .menu-drawer__navigation li .child_mobile_nav .child_mobile_nav li a {
  font-weight: 100;
  font-size: 0.9em;
  opacity: 0.8;
  color: var(--font-color);
}

.page-header .mobile_card .mobile_card_content .menu-drawer__utility-links {
  padding: 40px 15px;
}

.page-header .mobile_card .mobile_card_content .menu-drawer__utility-links .account {
  text-align: center;
  margin-bottom: 16px;
  display: block;
}

.page-header .mobile_card .mobile_card_content .menu-drawer__utility-links .menu-drawer__account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
  height: 60px;
  background-color: #cbb8c1;
  color: #fff;
}

.page-header .mobile_card .mobile_card_content .menu-drawer__utility-links .menu-drawer__account svg {
  height: 15px;
  width: 15px;
  margin-right: 10px;
  fill: #fff;
}

.page-header .mobile_card .mobile_card_content .menu-drawer__account-register {
  margin-top: 16px;
  text-align: center;
}

{% endstylesheet %}
{% if section  and section.type == "header" %}{% assign section = section %}{% else %}{% assign section = theme_config.global.sections.header %}{% endif %}{% assign router = section.router | default : routes.current_route %}
{% if section.settings.is_index_board and router == "index/index" and section.settings.is_board %}
{% assign showBoard = true %}
{% elsif section.settings.is_index_board == false and section.settings.is_board %}
{% assign showBoard = true %}
{% else %}
{% assign showBoard = false %}
{% endif %}

{% assign data = section.settings %}
{% get_nav nav_id={section.settings.nav.id} %}
{% assign header_nav = nav %}

<div class="page-header">
    {% if showBoard %}
    <div class="top-bar"
        style="--bg-color: {{ section.settings.board_bg }}; --text-color: {{ section.settings.board_font }};">
        <a href="{{ section.settings.board_link.url }}">{{section.settings.board_text}}</a>
    </div>
    {% endif %}
    <div class="container_wrapper">
        <div class="header_box" style="--font-color:{{section.settings.menu_color}};">
            <div class="nav">
                <div class="mobile_menu">
                    <span>
                        <svg t="1657865892882" class="icon icon-hamburger" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4181"><path fill="{{section.settings.menu_color}}" d="M162.12390136 462.56152344h699.75219727Q907.5078125 462.56152344 907.5078125 512t-45.63171387 49.43847656H162.12390136Q116.4921875 561.43847656 116.4921875 512t45.63171387-49.43847656z" p-id="4182"></path><path d="M162.12390136 709.75390625h699.75219727Q907.5078125 709.75390625 907.5078125 759.19238281t-45.63171387 49.43847657H162.12390136Q116.4921875 808.63085938 116.4921875 759.19238281t45.63171387-49.43847656z" p-id="4183"></path><path d="M162.12390136 215.36914062h699.75219727Q907.5078125 215.36914062 907.5078125 264.80761719t-45.63171387 49.43847656H162.12390136Q116.4921875 314.24609375 116.4921875 264.80761719t45.63171387-49.43847657z" p-id="4184"></path></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation"
                            class="icon icon-close" fill="none" viewBox="0 0 11 11">
                            <path
                                d="M9.00568 0.823302L5.33333 4.4989L1.66099 0.823302L1.48421 0.646368L1.30736 0.823223L0.823223 1.30736L0.646368 1.48421L0.823302 1.66099L4.4989 5.33333L0.823302 9.00568L0.646368 9.18246L0.823223 9.35931L1.30736 9.84344L1.48421 10.0203L1.66099 9.84337L5.33333 6.16777L9.00568 9.84337L9.18246 10.0203L9.35931 9.84344L9.84344 9.35931L10.0203 9.18246L9.84337 9.00568L6.16777 5.33333L9.84337 1.66099L10.0203 1.48421L9.84344 1.30736L9.35931 0.823223L9.18246 0.646368L9.00568 0.823302Z"
                                fill="{{section.settings.menu_color}}" stroke="{{section.settings.menu_color}}" stroke-width="0.5"></path>
                        </svg>
                    </span>
                </div>
                <ul class="tree-wrap">
                    {% if section.settings.nav.id != '' %}
                    {% for item in header_nav.nav_item %}
                    <li class="nav-li">
                        <div class="nav-li-a">
                            <div class="first_li">
                                {% include "nav_a", nav : item %}
                                {% include "nav_a", nav : item %}
                            </div>
                            {% if item.children %}
                            <svg aria-hidden="true" width="8" height="6" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 7">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 5L5 5.70711L5.70711 5L9 1.70711L8.29289 1L5 4.29289L1.70711 1L1 1.70711L4.29289 5Z" fill="currentColor"></path>
                            <path d="M5 5.70711L4.64645 6.06066L5 6.41421L5.35355 6.06066L5 5.70711ZM4.29289 5L3.93934 5.35355H3.93934L4.29289 5ZM5.70711 5L5.35355 4.64645V4.64645L5.70711 5ZM9 1.70711L9.35355 2.06066L9.70711 1.70711L9.35355 1.35355L9 1.70711ZM8.29289 1L8.64645 0.646447L8.29289 0.292893L7.93934 0.646447L8.29289 1ZM5 4.29289L4.64645 4.64645L5 5L5.35355 4.64645L5 4.29289ZM1.70711 1L2.06066 0.646447L1.70711 0.292893L1.35355 0.646447L1.70711 1ZM1 1.70711L0.646447 1.35355L0.292893 1.70711L0.646447 2.06066L1 1.70711ZM5.35355 5.35355L4.64645 4.64645L3.93934 5.35355L4.64645 6.06066L5.35355 5.35355ZM5.35355 4.64645L4.64645 5.35355L5.35355 6.06066L6.06066 5.35355L5.35355 4.64645ZM8.64645 1.35355L5.35355 4.64645L6.06066 5.35355L9.35355 2.06066L8.64645 1.35355ZM7.93934 1.35355L8.64645 2.06066L9.35355 1.35355L8.64645 0.646447L7.93934 1.35355ZM5.35355 4.64645L8.64645 1.35355L7.93934 0.646447L4.64645 3.93934L5.35355 4.64645ZM1.35355 1.35355L4.64645 4.64645L5.35355 3.93934L2.06066 0.646447L1.35355 1.35355ZM1.35355 2.06066L2.06066 1.35355L1.35355 0.646447L0.646447 1.35355L1.35355 2.06066ZM4.64645 4.64645L1.35355 1.35355L0.646447 2.06066L3.93934 5.35355L4.64645 4.64645Z" fill="rgba(203,184,193,1)"></path>
                            </svg>
                            {% endif %}
                        </div>
                        {% if item.children %}
                        <div class="nav-child">
                            <ul>
                                {% for el in item.children %}
                                <li>
                                    <dl>
                                        <dt>
                                            {% include "nav_a", nav : el %}
                                        </dt>
                                    </dl>
                                </li>
                                {% endfor %}

                            </ul>
                        </div>
                        {% endif %}
                    </li>
                    {% endfor %}
                    <li class="nav-li more-menu hidden">
                      <div class="nav-li-a">
                        <div class="first_li">
                          <a href="javascript:;">{{lang.general.more_link}}</a>
                          <a href="javascript:;">{{lang.general.more_link}}</a>
                        </div>
                      </div>
                      </li>
                    {% else %}
                    <li class="nav-li">
                        <div class="nav-li-a">
                            <div class="first_li">
                                <a href="/">Home</a>
                                <a href="/">Home</a>
                            </div>
                        </div>
                    </li>
                    <li class="nav-li">
                        <div class="nav-li-a">
                            <div class="first_li">
                                <a href="/pages/About-Us">About Us</a>
                                <a href="/pages/About-Us">About Us</a>
                            </div>
                        </div>
                    </li>
                    <li class="nav-li">
                        <div class="nav-li-a">
                            <div class="first_li">
                                <a href="/pages/Contact-Us">Contact Us</a>
                                <a href="/pages/Contact-Us">Contact Us</a>
                            </div>
                        </div>
                    </li>
                    {% endif %}
                </ul>
            </div>
            <div class="logo def_header_logo">
                {% include 'logo',settings:section.settings %}
            </div>

            <div class="action-icon">
                {% if section.settings.is_currency %}
                <div class="currency_box">
                    <div class="currency_txt" id="currencyBox">
                        {{ currency.standard_code }}
                        <svg t="1636003081626" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2399" width="10" height="10">
                            <path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z"
                                fill="{{section.settings.menu_color}}" p-id="2400"></path>
                        </svg>
                    </div>
                    <div class="drop_currency" id="currencyCon">
                        <ul class="currency">
                            {% get_currencies limit=100 %}
                            {% for list in currencies %}
                            <li>
                                <a href="javascript:void(0);" class="web-currency" data-type="{{ list.standard_code }}"
                                    rel="nofollow">
                                    <span>{{ list.standard_code }}</span><span>{{ list.symbol_left }}{{ list.symbol_right}}</span>
                                </a>
                            </li>
                            {% endfor %}
        
                        </ul>
                    </div>
        
                </div>
                {% endif %}
                <div class="action-icon-wrap">
                    {% if section.settings.is_search %}
                    <a class="saerch_icon" href="javascript:void(0);">
                        <svg width="18" height="18" t="1657866168360" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4767" width="200" height="200"><path fill="{{section.settings.menu_color}}" d="M749.05749512 818.86462403l-72.13073731-72.13073731a321.35009766 321.35009766 0 1 1 69.85656739-69.85656739l72.1307373 72.13073731a49.43847656 49.43847656 0 0 1-35.05187989 84.34204102 48.9440918 48.9440918 0 0 1-34.8046875-14.48547364zM264.80761719 487.28076172A222.47314453 222.47314453 0 1 0 487.28076172 264.80761719 222.47314453 222.47314453 0 0 0 264.80761719 487.28076172z" p-id="4768"></path></svg>
                    </a>
                    {% endif %}
            
                    {% if section.settings.is_member %}
                    <a class="account_icon login" href="/account/login">
                        <svg t="1657865980132" width="18" height="18" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4475"><path fill="{{section.settings.menu_color}}" d="M536.66979981 610.87695313a273.74084473 273.74084473 0 0 0-270.77453614 247.19238281H166.82055664a371.33239747 371.33239747 0 0 1 255.74523926-328.17260742 222.47314453 222.47314453 0 1 1 228.45520019 0 371.28295898 371.28295898 0 0 1 255.79467774 328.07373046H807.64208984A273.98803711 273.98803711 0 0 0 536.66979981 610.87695313z m-123.59619142-271.9116211a123.59619141 123.59619141 0 1 0 123.59619142-123.59619141 123.59619141 123.59619141 0 0 0-123.59619142 123.59619141z" p-id="4476"></path></svg>
                    </a>
                    {% endif %}
            
                    <a class="cart_icon" {% if page_ca !='cart_list' %} id="cart_icon" {% endif %} href="javascript:void(0);">
                        <svg width="18" height="18" t="1657866063732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4621"><path fill="{{section.settings.menu_color}}" d="M215.36914062 907.5078125a49.43847656 49.43847656 0 0 1-49.43847656-49.43847656V314.24609375a49.43847656 49.43847656 0 0 1 49.43847657-49.43847656h100.65673828a173.03466797 173.03466797 0 0 1 342.50976562 0H759.19238281a49.43847656 49.43847656 0 0 1 49.43847657 49.43847656v543.82324219a49.43847656 49.43847656 0 0 1-49.43847657 49.43847656z m49.43847657-98.87695313h444.94628906V363.68457031h-49.43847656v49.43847657H561.43847656V363.68457031H413.12304687v49.43847657H314.24609375V363.68457031H264.80761719zM557.13732911 264.80761719a74.15771484 74.15771484 0 0 0-139.76257325 0z" p-id="4622"></path></svg>                    
                        <span id="cart_number"></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="pop_search container_wrapper">
        <div class="search_wrap">
            <form action="/search" onsubmit="return oemsaasSearch('.search_txt')">
                <button type="submit" class="button-claer">
                    <svg class="search-mobile-icon" style="vertical-align: top;" t="1637129710453" class="icon"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527"
                        width="25" height="25">
                        <path fill="#000000"
                            d="M747.52 696.32l133.12 133.12c15.36 15.36 15.36 35.84 0 51.2-15.36 15.36-35.84 15.36-51.2 0l-133.12-133.12c-158.72 133.12-399.36 107.52-527.36-51.2s-107.52-399.36 51.2-527.36 399.36-107.52 527.36 51.2c117.76 138.24 117.76 337.92 0 476.16zM460.8 158.72C291.84 158.72 158.72 291.84 158.72 460.8s133.12 302.08 302.08 302.08c168.96 0 302.08-133.12 302.08-302.08 0-168.96-133.12-302.08-302.08-302.08z"
                            p-id="3528"></path>
                    </svg>
                </button>
                <input class="search_txt" type="text"
                    placeholder="{{ section.settings.search_placeholder }}">
                <a href="javascript:;" class="search_btn" id="search_btn_close">
                    <svg t="1641534932994" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="9671" width="18" height="18">
                        <path
                            d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z"
                            fill="#000000" p-id="9672"></path>
                    </svg>
                </a>
            </form>
        </div>
        
    </div>
    <div class="mobile_card" style="--font-color:{{section.settings.menu_color}};">
        <div class="mobile_card_content">
            <div class="menu-drawer__navigation">
                <ul>
                    {% if section.settings.nav.id %}

                    {% for item in header_nav.nav_item %}
                    <li>
                        <div class="mobile_nav-item">
                            {% include "nav_a", nav : item %}
                            {% if item.children %}
                            <svg aria-hidden="true" width="8" height="6" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 7">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 5L5 5.70711L5.70711 5L9 1.70711L8.29289 1L5 4.29289L1.70711 1L1 1.70711L4.29289 5Z" fill="currentColor"></path>
                               <path d="M5 5.70711L4.64645 6.06066L5 6.41421L5.35355 6.06066L5 5.70711ZM4.29289 5L3.93934 5.35355H3.93934L4.29289 5ZM5.70711 5L5.35355 4.64645V4.64645L5.70711 5ZM9 1.70711L9.35355 2.06066L9.70711 1.70711L9.35355 1.35355L9 1.70711ZM8.29289 1L8.64645 0.646447L8.29289 0.292893L7.93934 0.646447L8.29289 1ZM5 4.29289L4.64645 4.64645L5 5L5.35355 4.64645L5 4.29289ZM1.70711 1L2.06066 0.646447L1.70711 0.292893L1.35355 0.646447L1.70711 1ZM1 1.70711L0.646447 1.35355L0.292893 1.70711L0.646447 2.06066L1 1.70711ZM5.35355 5.35355L4.64645 4.64645L3.93934 5.35355L4.64645 6.06066L5.35355 5.35355ZM5.35355 4.64645L4.64645 5.35355L5.35355 6.06066L6.06066 5.35355L5.35355 4.64645ZM8.64645 1.35355L5.35355 4.64645L6.06066 5.35355L9.35355 2.06066L8.64645 1.35355ZM7.93934 1.35355L8.64645 2.06066L9.35355 1.35355L8.64645 0.646447L7.93934 1.35355ZM5.35355 4.64645L8.64645 1.35355L7.93934 0.646447L4.64645 3.93934L5.35355 4.64645ZM1.35355 1.35355L4.64645 4.64645L5.35355 3.93934L2.06066 0.646447L1.35355 1.35355ZM1.35355 2.06066L2.06066 1.35355L1.35355 0.646447L0.646447 1.35355L1.35355 2.06066ZM4.64645 4.64645L1.35355 1.35355L0.646447 2.06066L3.93934 5.35355L4.64645 4.64645Z" fill="rgba(203,184,193,1)"></path>
                            </svg>
                            {% endif %}

                        </div>
                        {% if item.children %}
                        <ul class="child_mobile_nav">
                            {% for el in item.children %}
                            <li>
                                <div class="mobile_nav-item">
                                    {% include "nav_a", nav : el %}
                                    {% if el.children %}
                                    <svg aria-hidden="true" width="8" height="6" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 7">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 5L5 5.70711L5.70711 5L9 1.70711L8.29289 1L5 4.29289L1.70711 1L1 1.70711L4.29289 5Z" fill="currentColor"></path>
                                       <path d="M5 5.70711L4.64645 6.06066L5 6.41421L5.35355 6.06066L5 5.70711ZM4.29289 5L3.93934 5.35355H3.93934L4.29289 5ZM5.70711 5L5.35355 4.64645V4.64645L5.70711 5ZM9 1.70711L9.35355 2.06066L9.70711 1.70711L9.35355 1.35355L9 1.70711ZM8.29289 1L8.64645 0.646447L8.29289 0.292893L7.93934 0.646447L8.29289 1ZM5 4.29289L4.64645 4.64645L5 5L5.35355 4.64645L5 4.29289ZM1.70711 1L2.06066 0.646447L1.70711 0.292893L1.35355 0.646447L1.70711 1ZM1 1.70711L0.646447 1.35355L0.292893 1.70711L0.646447 2.06066L1 1.70711ZM5.35355 5.35355L4.64645 4.64645L3.93934 5.35355L4.64645 6.06066L5.35355 5.35355ZM5.35355 4.64645L4.64645 5.35355L5.35355 6.06066L6.06066 5.35355L5.35355 4.64645ZM8.64645 1.35355L5.35355 4.64645L6.06066 5.35355L9.35355 2.06066L8.64645 1.35355ZM7.93934 1.35355L8.64645 2.06066L9.35355 1.35355L8.64645 0.646447L7.93934 1.35355ZM5.35355 4.64645L8.64645 1.35355L7.93934 0.646447L4.64645 3.93934L5.35355 4.64645ZM1.35355 1.35355L4.64645 4.64645L5.35355 3.93934L2.06066 0.646447L1.35355 1.35355ZM1.35355 2.06066L2.06066 1.35355L1.35355 0.646447L0.646447 1.35355L1.35355 2.06066ZM4.64645 4.64645L1.35355 1.35355L0.646447 2.06066L3.93934 5.35355L4.64645 4.64645Z" fill="rgba(203,184,193,1)"></path>
                                    </svg>
                                    {% endif %}
                                </div>
                                <ul class="child_mobile_nav">
                                    {% for ddItem in el.children %}
                                    <li style="padding:0 16px">
                                        {% include "nav_a", nav : ddItem %}
                                    </li>
                                    {% endfor %}
                                </ul>

                            </li>

                            {% endfor %}
                        </ul>
                        {% endif %}

                    </li>
                    {% endfor %}
                    {% else %}
                    <li>
                        <div class="mobile_nav-item">
                            <a href="/">Home</a>
                        </div>
                    </li>
                    <li>
                        <div class="mobile_nav-item">
                            <a href="/pages/About-Us">About Us</a>
                        </div>
                    </li>
                    <li>
                        <div class="mobile_nav-item">
                            <a href="/pages/Contact-Us">Contact Us</a>
                        </div>
                    </li>
                    {% endif %}
                </ul>
            </div>
            <div class="menu-drawer__utility-links">
                {% if section.settings.is_member %}
                {% if customerInfo and customerInfo.email %}
                <a class="account" href="/account">{{ lang.layout.customer.account }}</a>
                {% else %}
                <a href="/account/login"
                    class="menu-drawer__account">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation"
                        class="icon icon-account" fill="none" viewBox="0 0 15 15">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M9.55656 7.68136C10.7868 6.96901 11.6162 5.63815 11.6162 4.1165C11.6162 1.84599 9.76964 0 7.50001 0C5.23039 0 3.38381 1.8457 3.38381 4.1162C3.38381 5.6379 4.21323 6.96891 5.44355 7.68134C4.21998 8.0302 3.10178 8.68572 2.19729 9.59002C1.49862 10.2847 0.944683 11.1111 0.567524 12.0213C0.190364 12.9315 -0.00252349 13.9075 2.4926e-05 14.8927H1.7133C1.7133 11.702 4.309 9.10604 7.50001 9.10604C10.691 9.10604 13.2867 11.702 13.2867 14.8927H15C14.9998 13.4096 14.5598 11.9597 13.7357 10.7266C12.9115 9.49341 11.7403 8.5323 10.37 7.96473C10.1036 7.85439 9.83196 7.75989 9.55656 7.68136ZM8.83468 2.11815C8.43962 1.85417 7.97515 1.71328 7.50001 1.71328C6.86313 1.71413 6.25258 1.96751 5.80224 2.41785C5.3519 2.86819 5.09853 3.47874 5.09767 4.11562C5.09767 4.59076 5.23857 5.05522 5.50254 5.45029C5.76651 5.84535 6.14171 6.15326 6.58068 6.33509C7.01965 6.51692 7.50268 6.56449 7.96869 6.4718C8.43469 6.3791 8.86275 6.1503 9.19872 5.81433C9.5347 5.47836 9.7635 5.0503 9.85619 4.58429C9.94889 4.11828 9.90131 3.63525 9.71949 3.19628C9.53766 2.75731 9.22974 2.38212 8.83468 2.11815Z"
                            fill="currentColor"></path>
                    </svg>
                   {{lang.layout.customer.login}}
                </a>
                <div class="menu-drawer__account-register">
                    <a href="/account/register">{{ lang.layout.customer.create }}</a>
                </div>
                {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
(function(){$("#currencyBox").click(function (e) {
    e.stopPropagation();
    if ($(".currency_box").hasClass("drop_currency_on")) {
      $(".currency_box").removeClass("drop_currency_on");
    } else {
      $(".pop_search").removeClass("pop_search_on");
      $(".currency_box").addClass("drop_currency_on");
    }
  });
  $(".drop_currency").click(function (e) {
    e.stopPropagation();
  });
  $("#search_btn_close").click(function (e) {
    $(".pop_search").removeClass("pop_search_on");
  });
  $(document).click(function () {
    $(".currency_box").removeClass("drop_currency_on");
  });
  
  
  $(function () {
    $(".nav-child").each(function () {
      if ($(this).find("dl").length > 0) {
        $(this).parents("li").addClass("nav-child-three");
      }
    });
    $(".mobile_nav_down").click(function () {
      if ($(this).parent().parent().hasClass("on")) {
        $(this).parent().parent().removeClass("on");
      } else {
        $(this).parent().parent().addClass("on");
      }
    });
    $(".mobile_currency-select").val("{{currency.standard_code}}");
    $(".mobile_nav-item").click(function () {
      if($(this).hasClass('open')) {
        $(this).removeClass('open');
      }
      else {
        $(this).addClass('open');
      }
      $(this).siblings(".child_mobile_nav").slideToggle();
    });
    $(".mobile_currency-select").change(function (params) {
      currencyPath($(this).val());
    });
  
    $(".web-currency").click(function () {
      currencyPath($(this).data("type"));
    });
    function currencyPath(val) {
      const currency = moi.getUrlParam("currency");
      if (currency || location.href.indexOf("theme_id") > -1) {
        location.href = moi.changeURLArg(location.href, "currency", val);
      } else {
        location.href = moi.addURLParam(location.href, "currency", val);
      }
    }
    $(".saerch_icon").click(function (e) {
      $(".pop_search").addClass("pop_search_on");
    });
    $(".pop_search_close").click(function () {
      $(".pop_search").removeClass("pop_search_on");
    });
  
   
    $(".mobile_menu").click(function () {
      let dom = $(this).find('span')
      if(dom.hasClass('open')) {
        dom.removeClass('open')
        $('.mobile_card').css({transform: 'translateX(-100%)', opacity: 0})
        $('.page-header').removeClass('on')
        $('body').removeClass('body-scroll-none')
      }else {
        dom.addClass('open')
        $('.mobile_card').css({transform: 'translateX(0)', opacity: 1})
        $('body').addClass('body-scroll-none')
        $('.page-header').addClass('on')
      }
      if($(window).width() > 768) {
         $(".tree-wrap").css('display', 'flex')
         $(this).hide()
      }
    
    });
   $(document).ready(function() {
     $(".mobile_card").height($(window).height() - $(".page-header").height());
   })
  
    $("#cart_icon").click(function () {
      window.oemsaasMiniCart();
    });
    $(".minicart .close_btn").click(function () {
      $(".minicart").removeClass("minicart_on");
    });
    $(".minicart").click(function () {
      $(".minicart").removeClass("minicart_on");
    });
    $(".minicart_wrapper").click(function (e) {
      e.stopPropagation();
    });
    addCartNum();
  });

  moi.setHeadMenu({
    parent:".nav",
    child:".nav-li",
    moreClass:".more-menu",
    logoSrc:"{{section.settings.logo_pic.src}}",
    onMore:function(){
      $(".tree-wrap").css('display', 'none')
      $('.mobile_card').css({transform: 'translateX(0)', opacity: 1})
      $(".mobile_menu").show().find('span').addClass('open')
      $('body').addClass('body-scroll-none')
    }
  })

  
  function switchClass(dom, name) {
    if (dom.hasClass(name)) {
        dom.removeClass(name);
    } else {
        dom.addClass(name);
    }
  }})()
</script>
{% schema %}
{
	"tag": "",
	"class": "header",
	"is_global": true,
	"name": {
		"zh_CN": "头部",
		"en_US": "Header"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "菜单导航设置",
				"en_US": "Menu Navigation Settings"
			}
		},
		{
			"type": "card_nav",
			"label": {
				"zh_CN": "选择菜单",
				"en_US": "Select menu"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "nav"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "公告栏",
				"en_US": "Bulletin board"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "开启公告栏",
				"en_US": "Turn on the bulletin board"
			},
			"id": "is_board",
			"default": true
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "仅首页显示公告栏",
				"en_US": "Display bulletin board only on home page"
			},
			"id": "is_index_board"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "公告栏文案",
				"en_US": "Bulletin board copy"
			},
			"id": "board_text",
			"default": "We Free Shipping Worldwide."
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "公告栏链接",
				"en_US": "Bulletin board link"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "board_link"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "顶部LOGO与图片",
				"en_US": "Top LOGO and image"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "pc端logo图片",
				"en_US": "Logo image on PC"
			},
			"id": "pc_logo_pic",
			"default": ""
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "pc端logo图片宽度",
				"en_US": "Logo image width on PC"
			},
			"id": "pc_logo_w",
			"max": "400",
			"unit": "px",
			"min": "0",
			"default": 60
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "移动端logo图片",
				"en_US": "Mobile logo image"
			},
			"id": "wap_logo_pic",
			"default": ""
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "移动端logo图片宽度",
				"en_US": "Mobile logo image width"
			},
			"id": "wap_logo_w",
			"max": "200",
			"unit": "px",
			"min": "0",
			"default": 60
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "个人中心",
				"en_US": "Personal center"
			},
			"id": "is_member",
			"default": "1"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "搜索",
				"en_US": "Search"
			},
			"id": "is_search",
			"default": "1"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "货币切换",
				"en_US": "Currency switch"
			},
			"id": "is_currency",
			"default": "1"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "搜索底纹",
				"en_US": "Search shading"
			},
			"id": "search_placeholder",
			"default": "Search"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "颜色设置",
				"en_US": "Color Settings"
			}
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "公告栏字体颜色",
				"en_US": "Bulletin board font color"
			},
			"id": "board_font",
			"default": "#333"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "公告栏背景",
				"en_US": "Bulletin board background"
			},
			"id": "board_bg",
			"default": "#cbb8c1"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "菜单字体颜色",
				"en_US": "Menu font color"
			},
			"id": "menu_color",
			"default": "#514747"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"nav": {
				"id": "",
				"title": ""
			},
			"is_board": true,
			"is_index_board": false,
			"board_text": "We Free Shipping Worldwide.",
			"board_link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"pc_logo_pic": {
				"src": "",
				"alt": ""
			},
			"pc_logo_w": 60,
			"wap_logo_pic": {
				"src": "",
				"alt": ""
			},
			"wap_logo_w": 60,
			"is_member": true,
			"is_search": true,
			"is_currency": true,
			"board_font": "#fff",
			"board_bg": "#cbb8c1",
			"menu_color": "#514747",
			"search_placeholder": "What Are You Looking For"
		},
		"blocks": []
	}
}
{% endschema %}